import React, { PureComponent } from 'react';
import styles from './projectModal.less'
import { withRouter } from "react-router";
import PropTypes from 'prop-types'
import EditProjectModal from './editProjectModal'
import { parseHour } from '@/utils'

function formatNum(num, demical=1){
  let result = num >= 10000 ? `${(num/10000).toFixed(demical)}` : (num*1).toFixed(demical);
  return result ? `${result}`.split('.') : ["0"];
}

export default class ProjectModal extends PureComponent {

  static propTypes = {
    data: PropTypes.Array
  }

  constructor(props){
    super(props)
    this.state = {
      visible: false,
      defaultData: {},
      more: false,
      list: []
    }
  }

  /**
   * @param {Object} 工程数据
   */
  show = (data) => {
    this.setState({ visible: true, defaultData: data })
  }

  dismiss = () => {
    this.setState({ visible: false, more: false })
  }

  componentWillReceiveProps(props, nextProps) {
    this.setState({ list: props.data })
  }

  renderItem = (data, index) => {
    const totalOil = formatNum(data.totalOil);
    const tempTotalDuration = parseHour(data.totalDuration);
    const totalDuration= formatNum(tempTotalDuration);
    const totalQuantity = formatNum(data.totalQuantity);
    return (
      <div onClick={()=>{ this.props.history.push('/projectDetail', { id: data.projId }) }}>
        <div className={styles.modal_header}>
          <div className={styles.item}>
            <div className={styles.item_value}>{totalOil[0]}{totalOil[1] && '.'}<span className={styles.standard}>{totalOil[1]}{data.totalOil>=10000 && '万'}L</span></div>
            <div className={styles.item_name}>油耗</div>
          </div>
          <div className={styles.item}>
            <div className={styles.item_value}>{totalDuration[0]}{totalDuration[1] && '.'}<span className={styles.standard}>{totalDuration[1]}{tempTotalDuration>=10000 && '万'}H</span></div>
            <div className={styles.item_name}>工作时间</div>
          </div>
          <div className={styles.item}>
            <div className={styles.item_value}>{totalQuantity[0]}{totalQuantity[1] && '.'}<span className={styles.standard}>{totalQuantity[1]}{data.totalQuantity>=10000 && '万'}M³</span></div>
            <div className={styles.item_name}>工作方量</div>
          </div>
        </div>
        <div className={styles.project_inform}>
          <div className={styles.inform_top}>
          <div className={styles.project_no}>{data.index}</div>
            <div className={styles.project_name}>{data.projName||' '}</div>
            <img onClick={(e)=>{ e.stopPropagation(); this.editModal && this.editModal.show(data) }} className={styles.project_eidt} src={require('../assets/img/map/edit.png')} />
            <div className={styles.project_status} style={{ color: data.isActive==1 ? '#2DD5B8' : '#989898'}}>{data.isActive==1?'进行中':'已完工'}</div>
          </div>
          <div className={styles.project_address} onClick={(e)=>{ e.stopPropagation(); this.itemClose(index) }}>
            <div className={styles.address_text}>{data.address}</div>
            {index!==undefined &&<img className={styles.modal_down} src={require('../assets/img/modal_down.png')} />}
          </div>
        </div>
        {!!this.state.more && <div className={styles.list_seperator}></div>}
      </div>
    )
  }

  renderItemOff = (data, index) => {
    return (
      <div>
        <div className={styles.project_inform} onClick={()=>{ this.props.history.push('/projectDetail', { id: data.projId }) }}>
          <div className={styles.inform_top}>
            <div className={styles.project_name}>{data.projName}</div>
            <img onClick={(e)=>{ e.stopPropagation(); this.editModal && this.editModal.show(data) }} className={styles.project_eidt} src={require('../assets/img/map/edit.png')} />
            <div className={styles.project_status} style={{ color: data.isActive==1 ? '#2DD5B8' : '#989898'}}>
              {data.isActive==1?'进行中':'已完工'}
            </div>
            {index!==undefined &&<img onClick={(e)=>{ e.stopPropagation(); this.itemClose(index) }} className={styles.modal_up} src={require('../assets/img/modal_up.png')} />}
          </div>
        </div>
        <div className={styles.list_seperator}></div>
      </div>
    )
  }

  itemClose = (i) => {
    const tempList = this.state.list.slice();
    tempList[i].close = tempList[i].close ? false : true;
    this.setState({
      list: tempList
    })
  }

  render() {
    const { defaultData, more, list } = this.state;
    if(!this.state.visible) return null
    return (
      <div className={styles.modal} onClick={(e)=>{ e.stopPropagation() }}>
        <EditProjectModal parantDismiss={this.dismiss} refresh={this.props.refresh} ref={el=>{ this.editModal = el }} data={defaultData} />
        <div style={{ flex: 1 }} onClick={(e)=>{ this.dismiss() }} />
        <div className={styles.list}>
          {this.renderItem(defaultData)}
          {
            more && this.props.data.map((data, index)=>{
              if(data.projId==this.state.defaultData.projId) return null;
              return data.close ? this.renderItemOff(data, index) : this.renderItem(data, index)
            })
          }
        </div>
        {more ? 
          // <div className={styles.project_mini} onClick={()=>{ this.setState({ more: false })} }>
          //   <img className={styles.mini_icon} src={require('../assets/img/map/down.png')} />
          // </div>
          <div className={styles.project_more} onClick={()=>{ this.setState({ more: false })} }>
            <img className={styles.more_icon} src={require('../assets/img/map/down.png')} />
            <div className={styles.more_text}>工程列表</div>
          </div>
          :
          <div className={styles.project_more} onClick={()=>{ this.setState({ more: true })} }>
            <img className={styles.more_icon} src={require('../assets/img/map/up.png')} />
            <div className={styles.more_text}>工程列表</div>
          </div>}
      </div>
    )
  }
}